<template>
  <a-list :bordered="false">
    <a-list-item>
      <a-list-item-meta>
        <template #avatar>
          <a-typography-paragraph>登录密码</a-typography-paragraph>
        </template>
        <template #description>
          <div class="content">
            <a-typography-paragraph>
              已设置。密码至少6位字符，支持数字、字母和除空格外的特殊字符。
            </a-typography-paragraph>
          </div>
          <div class="operation">
            <a-link @click="handlePasswordEdit">修改</a-link>
          </div>
        </template>
      </a-list-item-meta>
    </a-list-item>
    <a-list-item>
      <a-list-item-meta>
        <template #avatar>
          <a-typography-paragraph>安全手机</a-typography-paragraph>
        </template>
        <template #description>
          <div class="content">
            <a-typography-paragraph>
              {{ userInfo?.mobile ?? '--' }}
            </a-typography-paragraph>
          </div>
        </template>
      </a-list-item-meta>
    </a-list-item>
  </a-list>
  <passwordModal
    v-if="passwordShow"
    :visible="passwordShow"
    @ok="handlePasswordOk"
    @cancel="handlePasswordOk"
  />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { getUserInfo } from '@/api/user';
  import passwordModal from './password-modal.vue';

  const userInfo = ref();
  const passwordShow = ref(false);
  const handlePasswordEdit = () => {
    passwordShow.value = true;
  };
  const handlePasswordOk = () => {
    passwordShow.value = false;
  };
  getUserInfo().then((result: any) => {
    userInfo.value = result.data.user;
  });
</script>

<style scoped lang="less">
  :deep(.arco-list-item) {
    border-bottom: none !important;
    .arco-typography {
      margin-bottom: 20px;
    }
    .arco-list-item-meta-avatar {
      margin-bottom: 1px;
    }
    .arco-list-item-meta {
      padding: 0;
    }
  }
  :deep(.arco-list-item-meta-content) {
    flex: 1;
    border-bottom: 1px solid var(--color-neutral-3);

    .arco-list-item-meta-description {
      display: flex;
      flex-flow: row;
      justify-content: space-between;

      .tip {
        color: rgb(var(--gray-6));
      }
      .operation {
        margin-right: 6px;
      }
    }
  }
</style>
